<template>
  <el-header>
    <img class="logo" src="../assets/images/homelogo.jpg" alt="" />
    <div class="home" @click="$router.push('/home')" :class="$route.path == 'welcome' ? 'active' : ''">
      <i class="iconfont icon-shouye"></i>
      <span>首页</span>
    </div>
    <div class="tips">
      <p>admin,上午好！今天你看上去好精神哦！</p>
    </div>
    <div class="top-r">
      <el-dropdown trigger="click" @command="go">
        <div class="setting" :class="topurl.includes($route.path) ? 'active' : ''">
          <i class="iconfont icon-shezhi"></i>
          <span>设置</span>
        </div>
        <el-dropdown-menu slot="dropdown" style="padding: 10px">
          <el-dropdown-item v-for="(item, index) in getTopMenu" :key="index" :icon="'iconfont' + item.ico" :command="item.url"
            ><i :class="['iconfont', item.ico]"></i>
            {{ item.name.replace(/管理管理/g, '管理') }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div @click="logout" class="el-dropdown">
        <i class="iconfont icon-tuichudenglu1"></i>
        <span>退出登录</span>
      </div>
    </div>
  </el-header>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'HomeView',
  data() {
    return {
      topurl: [],
    }
  },
  methods: {
    ...mapActions(['logoutAsync']),
    go(url) {
      // 避免重复导航到当前路由
      if (this.$route.path !== url) {
        this.$router.push(url).catch((err) => {
          if (err.name !== 'NavigationDuplicated') {
            throw err
          }
        })
      }
    },
    logout() {
      this.$confirm('是否继续退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            await this.logoutAsync()
            localStorage.clear()
            this.$router.push('/')
          } catch (error) {
            this.$message.error('退出失败，请重新退出登录')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出',
          })
        })
      // this.$store.dispatch('logoutAsync')
      // this.$router.push('/login')
    },
  },
  created() {
    console.log('route', this.$route, this.getTopMenu)
    this.topurl = this.getTopMenu.map((item) => item.url)
    console.log(this.topurl)
  },
  computed: {
    ...mapGetters(['getTopMenu']),
  },
}
</script>

<style lang="less" scoped>
@import url(../assets/css/header.less);
@import url(../assets/iconfont/iconfont.css);
</style>
